<template>
    <el-row>
        <el-col :span="2">
            <el-dropdown trigger="click">
                <span class="el-dropdown-link"
                    >全部<i class="el-icon-arrow-down el-icon--right"></i
                ></span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item icon="el-icon-plus"
                        ><span @click="timeClickTop"
                            >时间升序</span
                        ></el-dropdown-item
                    >
                    <el-dropdown-item icon="el-icon-plus"
                        ><span @click="timeClickDon"
                            >时间降序</span
                        ></el-dropdown-item
                    >
                </el-dropdown-menu>
            </el-dropdown>
        </el-col>
        <el-col :span="7">
            <div class="block" style="width: 100%">
                <el-date-picker
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                >
                </el-date-picker>
            </div>
        </el-col>
        <el-col :span="5" class="xuanze">
            <el-dropdown trigger="click">
                <span class="el-dropdown-link"
                    >选择大棚<i class="el-icon-arrow-down el-icon--right"></i
                ></span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                        ><span @click="aClick">草莓</span></el-dropdown-item
                    >
                    <el-dropdown-item
                        ><span @click="aClick">辣椒</span></el-dropdown-item
                    >
                    <el-dropdown-item
                        ><span @click="aClick">西瓜</span></el-dropdown-item
                    >
                    <el-dropdown-item
                        ><span @click="aClick">葡萄</span></el-dropdown-item
                    >
                    <el-dropdown-item
                        ><span @click="aClick">黄瓜</span></el-dropdown-item
                    >
                    <el-dropdown-item
                        ><span @click="aClick">西红柿</span></el-dropdown-item
                    >
                </el-dropdown-menu>
            </el-dropdown>
        </el-col>
        <el-col :span="4" class="chaxunIn">
            <div>
                <el-input placeholder="请输入内容" v-model="search" clearable>
                    <el-button
                        slot="append"
                        icon="el-icon-search"
                        @click="searchClick"
                    ></el-button>
                </el-input>
            </div>
        </el-col>
        <el-col :span="2"
            ><el-button type="primary" @click="searchClick" class="chaxun"
                >查询</el-button
            ></el-col
        >
        <el-col :span="2"
            ><el-button type="danger" style="margin-left: 120px"
                >导入</el-button
            ></el-col
        >
        <el-col :span="2"
            ><el-button
                type="success"
                @click="outClick"
                style="margin-left: 100px"
                >导出</el-button
            ></el-col
        >
    </el-row>
</template>

<script>
import eventBus from "@/utils/eventBus.js"
export default {
    data() {
        return {
            search: "",
        }
    },
    methods: {
        searchClick() {
            this.$emit("searchFn", this.search)
        },
        timeClickTop() {
            eventBus.$emit("timeClickTop")
        },
        timeClickDon() {
            eventBus.$emit("timeClickDon")
        },
        aClick(val) {
            //  var aVal = val.target.innerText
            // console.log(val.target.innerText);
            this.$emit("aClickFn", val.target.innerText)
        },
        outClick() {
            this.$emit("outClickFn")
        },
    },
}
</script>

<style lang="less" scoped>
* {
    font-size: 14px;
    // color: #ffffff;
}
.el-button {
    color: #fff;
}
.chaxun {
    margin-left: 10px;
}
.xuanze {
    margin-left: 10px;
    width: 100px;
    font-size: 14px;
}
.chaxunIn {
    margin-left: 10px;
}
.el-row {
    line-height: 30px;
    margin-bottom: 20px;
}
.el-date-picker {
    width: 100px;
}
/deep/.el-date-editor .el-range-separator {
    padding: 0;
}
.el-date-editor--daterange.el-input,
.el-date-editor--daterange.el-input__inner,
.el-date-editor--timerange.el-input,
.el-date-editor--timerange.el-input__inner {
    width: 100%;
}
.el-dropdown-link {
    background-color: #eff3f9;
    font-weight: 600;
    padding: 3px;
    border-radius: 5px;
}
</style>
